<template>
  <div id="box">
    <div class="top">
      <h3>添加</h3>

    </div>
    <div class="center">

      <div class="left">
        <el-form 
                 :model="form"
                 class="demo-form-inline"
                 label-width="120px">
          <el-form-item label="管理员名称">
            <el-input v-model="form.admin_name"
                      class="input" />
          </el-form-item>

          <el-form-item label="邮箱">
            <el-input v-model="form.email"
                      class="input" />
          </el-form-item>

          <el-form-item label="手机号">
            <el-input v-model="form.mobile"
                      class="input" />
          </el-form-item>

          <el-form-item label="管理员密码">
            <el-input v-model="form.pwd"
                      class="input" />
          </el-form-item>

          <el-form-item label="确认密码">
            <el-input v-model="form.repwd"
                      class="input" />
          </el-form-item>

        </el-form>
      </div>
      <div class="right">

        <el-form 
                 :model="form"
                 class="demo-form-inline"
                 label-width="120px">
          <el-form-item label="真实姓名">
            <el-input v-model="form.real_name"
                      class="input" />
          </el-form-item>

          <el-form-item label="部门">
         
             <el-cascader  :options="options" 
   
             :props="props"

           />
         
          </el-form-item>

          <el-form-item label="角色">
            <el-radio-group v-model=" form.role"
                            class="ml-4">
              <el-radio label="1"
                        size="large">经营负责人</el-radio>
              <el-radio label="2"
                        size="large">部门负责人</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="是否启用">

            <el-switch v-model="form.is_use"
                       class="ml-2"
                       style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />

          </el-form-item>

          <el-form-item label="备注">
            <el-input
              class="input"
                      type="textarea" />
          </el-form-item>

             <el-form-item >
                   <el-button type="info" @click="reset">重置</el-button>
                     <el-button type="primary" @click="add">添加</el-button>
          </el-form-item>

        </el-form>

      </div>

    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive ,ref,onMounted} from "vue";
import{adminadd} from '../../api/Administrator/adminlist'
import {departmentlist} from '../../api/chart/keyboard'

// do not use same name with ref
const form = reactive({
  admin_name: "",
  email: "",
  mobile: "",
  pwd: "",
  repwd: "",
  real_name: "",
  is_use: 1, 
  // desc:'',

    role:"1" ,//角色 1 经管负责人 2 部门负责人,
    department:"1"//部门
});
const props = {
   value: 'name',
    label: 'name',
    children:"son"
}



  const add=async()=>{
    console.log(form);
    const res=await adminadd(form)
      console.log(res);
      
  }
  let options = ref([]);

    const list=async()=>{
    console.log(6);
    const res:any = await departmentlist()
    console.log(res);
    options.value=res.data

      
    
  }


    const reset=()=>{
      form.admin_name=''
      form.department=''
      form.pwd=''
      form.repwd=''
      form.real_name=''
      form.email=''
      form.mobile=''
    }

    onMounted(()=>{
      list()
  })
</script>

<style lang="less" scoped>
@import url("../../assets/css/Administrator/adminadd.less");
</style>